<script setup name="BuildTree">
import { map, includes } from 'lodash-es';
import { treeConvert } from '@/utils/tools.js';
import { useRequest, useWatch } from '@/hooks';
import { getTreeData } from '@/api/index.js';

const props = defineProps({
  inId: { type: String, default: '' },
});
const emit = defineEmits(['nodeData']);
const treeRef = ref(null);
const currentNode = ref(null);
const treeList = ref([]);
const searchList = ref([]);
const visible = ref(false);
const filterText = ref('');
const [treeData, loading, run] = useRequest(getTreeData, {
  manual: true,
  onSuccess: res => {
    nextTick(() => {
      if (res.data?.length) {
        currentNode.value = res.data[0];
        treeRef.value.setCurrentKey(res.data?.[0]?.['id'] ?? null);
        treeList.value = treeConvert(res.data);
        emit('nodeData', res.data[0]);
      }
    });
  },
});
const changeInput = val => {
  if (val.length > 0) {
    searchList.value = [];
    map(treeList.value, v => {
      includes(v['name'], val) ? searchList.value.push(v) : null;
    });
    visible.value = true;
  } else {
    visible.value = false;
  }
};
const handleFocus = () => {
  visible.value = filterText.value.length > 0 ? true : false;
};
const handleBlur = () => {
  visible.value = false;
};
const selectSearchItem = item => {
  console.log(item, 'item');

  currentNode.value = item;
  treeRef.value.setCurrentKey(item.id);
  visible.value = false;
  // filterText.value = '';
};
const handleNodeClick = data => {
  console.log(22222);

  currentNode.value = data;
  emit('nodeData', data);
};
useWatch(
  () => props.inId,
  n => {
    console.log(n, 'inid');
    run({ enterpriseCode: n });
  },
);
</script>
<template>
  <div>
    <el-popover
      :visible="visible"
      :popper-style="{ width: 'calc(18% - 40px)' }"
      :teleported="false"
      placement="bottom"
      popper-class="u-base-fg"
    >
      <template #reference>
        <el-input
          v-model="filterText"
          suffix-icon="search"
          size="small"
          placeholder="查询建筑区域名称"
          clearable
          class="u-mb20"
          @input="changeInput"
          @blur="handleBlur"
          @focus="handleFocus"
        />
      </template>
      <ul v-show="filterText.length > 0 && searchList.length !== 0" class="tree-searchList">
        <li v-for="item in searchList" :key="item.id" @click="selectSearchItem(item)">
          {{ item.name }}
        </li>
      </ul>
      <div v-show="searchList.length === 0" class="u-ta-c">无数据</div>
    </el-popover>
    <el-tree
      v-loading="loading"
      ref="treeRef"
      :data="treeData"
      :props="{ children: 'children', label: 'name' }"
      :expand-on-click-node="false"
      node-key="id"
      default-expand-all
      highlight-current
      @node-click="handleNodeClick"
    />
  </div>
</template>
<style lang="scss" scoped>
.tree-searchList {
  li {
    padding: 8px 10px;
    cursor: pointer;
  }
}
.app-dark .tree-searchList li:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.app-light .tree-searchList li:hover {
  background-color: #bfd7df;
}
</style>
